<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link type="text/css" rel="stylesheet" href="{{ style.common }}"/>
    <link type="text/css" rel="stylesheet" href="{{ style.index }}"/>
</head>
<body>
<style type="text/css" rel="stylesheet">
    @font-face {
        font-family: 'Typo';
        font-style: normal;
        src: local('Typo'), local('Typo'), url({{ statics['TypoGraphica.otf'] }});
    }
</style>
<div id="header">
    <a id="username" href="{{ links.home }}">{{ user.username }}</a>
    <div id="nav">
        <a class="selected" href="{{ links.home }}">HOME</a>
        <a href="{{ links.tags }}">TAGS</a>
        <a href="{{ links.archives }}">ARCHIVES</a>
        <a href="{{ links.about }}">ABOUT</a>
    </div>
</div>
<div id="articles">
    <h4>RECENT POST</h4>
    <hr/>
    <template @for="article of articles">
        <div class="article">
            <a class="titleLink" href="{{ article.link }}">
                <h1 class="title">{{ article.title }}</h1>
            </a>
            <ul class="tags">
                <template @for="tag of article.tags">
                    <li><a href="{{ tag.link }}">#{{ tag.name }}</a></li>
                </template>
            </ul>
            <div class="introduction">{{ article.introduction }}</div>
            <p class="date">Written By {{ user.name }}
                on {{ article.createDate.month }}/{{ article.createDate.date }} {{ article.createDate.year }}
            </p>
            <a class="more" href="{{ article.link }}">READ MORE</a>
            <hr>
        </div>
    </template>
</div>

<div id="footer">
    <h3>Material</h3>
    <p>Powered With ❤ By <a>Page.qy</a></p>
</div>


</body>
</html>
